import React, { useState, useEffect } from 'react'
import { Table, Tag, Space } from 'antd';
import Container from 'components/Container'
import { getUser } from 'api/user'
const columns = [
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        render: text => <s>{text}</s>,
    },
    {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '标签',
        key: 'tags',
        dataIndex: 'tags',
        render: tags => (
            <>
                {tags.map(tag => {
                    let color = tag.length > 5 ? 'geekblue' : 'green';
                    if (tag === 'loser') {
                        color = 'volcano';
                    }
                    return (
                        <Tag color={color} key={tag}>
                            {tag.toUpperCase()}
                        </Tag>
                    );
                })}
            </>
        ),
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space size="middle">
                <s>Invite {record.name}</s>
                <s>Delete</s>
            </Space>
        ),
    },
];


export default function Users() {
    const [list, setList] = useState([])
    const [loading, setLoading] = useState(true)
    useEffect(() => { 
        (async () => {
            const { data } = await getUser()  
            setList(data)
            setLoading(false)
        })() 
    }, [])
    return (
        <Container title="用户管理">
            <div className="users-container">
                <Table
                    loading={loading}
                    pagination={{ position: ['bottomCenter'] }}
                    bordered
                    columns={columns}
                    dataSource={list} />
            </div>
        </Container>
    )
}
